import "./index.less";
import {Fetch} from  '../../libs/';
import {Url, md5Url} from  '../../libs/Url';
import Tabs from '../../components/tabs/';
import {connect} from "react-redux";
import {fetch} from "../../stores/action";
import Animate from 'rc-animate';
import {parseSearch} from  '../../libs/utils';
import CSS from '../../libs/CSS'

class HomeWork extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 0,
            photo: 1
        }
    }

    componentDidMount() {
        let clientInfo = parseSearch();
        if (clientInfo && clientInfo.clientid) {
            Fetch(Url.GET_CLASS, {body: {deviceid: clientInfo.clientid}})
                .then(res => {
                    if (res['class'] && res['class'].classid) {
                        clientInfo['class'] = res['class'];
                        clientInfo['school'] = res['school'];
                        clientInfo['device'] = res['device'];
                        clientInfo['classroom'] = res['classroom'];
                        // dispatch(clientInfoSet(clientInfo));
                        Fetch(Url.HOMEWORK, {
                            body: {
                                classid: res['class'].classid
                            }
                        })
                            .then(res => {
                                this.setState({data: res, loaded: true});
                            })
                            .catch(e => {
                                console.log(e)
                            });

                    } else {
                        alert('设备码没有跟班级对应，请核验!')
                    }
                })
                .catch(e=> {
                    console.log(e)
                })
        } else {
            alert('设备码不合法，请核验!')
        }
    }

    _parseData(data) {
        let newData = [];
        for(let x of data) {
            let [hour, minute] = x.starttime.split(':');
            let now = new Date();
            let nowHour = now.getHours();
            let nowMinute = now.getMinutes();
            if(nowHour > hour) {
                newData.push(x);
            } else {
                if(nowHour == hour && nowMinute > minute) {
                    newData.push(x);
                }
            }
        }
        return newData;
    }

    render() {
        let data = (this.state.data && this.state.data.list) ? this.state.data : {list: [], classtime: []};
        let list = [{}];
        const current = data.list[this.state.active] ? data.list[this.state.active] : '', state = this.state;
        if(data.list.length != 0) {
            list = this._parseData(data.list);
        }
        return (
            <div className="todayTeach clearfix" style={{}}>
                <div className="panel-item panel1 container-border">
                    <Tabs
                        tabs={list}
                        onchange={(index)=> {
                            this.setState({
                                active: index
                            })
                        }}/>
                    <div className="tabs-content">
                        <div className="title">
                            <img src={require('../../imgs/homework/homework_tit_icon.png')} style = {{width: CSS.pixel(54), height: CSS.pixel(72)}} />
                            <div>
                                {current.comment ? '' : '今日暂未发布作业'}
                                <div className="progress_" style={{width: '15rem', background: '#fe9ab4'}}>今日作业</div>
                            </div>
                        </div>
                        <div style={{position: 'relative'}}>
                            {/*<Animate
                             component=""
                             transitionName="fade"
                             >
                             {
                             state.loaded ? null :
                             <img key="1" src={require('../../imgs/schedule/course_bg.png')} alt=""
                             style={{
                             width: '100%',
                             height: '100%',
                             position: 'absolute',
                             top: 0,
                             right: 0,
                             bottom: 0, left: 0
                             }}/>
                             }
                             </Animate>*/}
                            <div className="item" style = {{fontSize: CSS.pixel(36), color: '#a0a0a0'}}>
                                {/*<div dangerouslySetInnerHTML={{__html: current.comment || '内容为空'}} />*/}
                                {current.comment || '内容为空'}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const select = state => {
    return {
        clientInfo: state.clientInfo,
        [md5Url.HOMEWORK]: state.fetchBySubject[md5Url.HOMEWORK],
    }
};

export default connect(select)(HomeWork)